<template>
	<base-list-plus
		class="flex-1"
		:loading="loading"
		:isFinish="isFinish"
		:isEmpty="list.length === 0"
		emptyImg="empty/comment"
		@load="search">
		<up-comment-item class="mt-1" v-for="item in list" :key="item.id" :data="item" />
	</base-list-plus>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { BaseListPlus } from '@/components/base'
import { UpCommentItem } from '@/components/up'
import { useRequest } from '@/hooks'
import { CommentType } from '@/types'
import { useAppStore, useFeedStore } from '@/store'
import { getCommentList } from '@/api/feed'

const appStore = useAppStore()

const feedStore = useFeedStore()

const params = computed(() => ({
	tweetId: feedStore.commentFeed?.id,
	oddsStyle: appStore.odds,
	locale: appStore.lang
}))

const { run, loading, list, isFinish } = useRequest<CommentType>(getCommentList, {
	pageSize: 5
})

const search = (refresh = false) => {
	run(params.value, { refresh })
}

watch(
	() => params.value,
	() => {
		if (feedStore.commentFeed) {
			search(true)
		}
	},
	{ immediate: true }
)
</script>
